---
title: 開発ツールバー
description: Astroでの開発ツールバーについてのガイド。
i18nReady: true
---
import RecipeLinks from "~/components/RecipeLinks.astro";

開発サーバーが実行されている間、Astroは各ページの下部付近にデベロッパーツールバーを表示します。

ツールバーには数々のデバッグや開発中のサイトを検査するツールが含まれています。また、これらのツールは[拡張](#開発ツールバーを拡張する)したり、[Dev Toolbar API](/ja/reference/dev-toolbar-app-reference/)を使用して[自分のツールバーアプリ](/ja/recipes/making-toolbar-apps/)を作成することも可能です。

このツールバーは標準で有効化され、かつページ下部にホバーした時に表示されます。開発者ツールは開発環境のみ有効化され、本番環境では表示されません。


## 標準搭載アプリ

### Astro メニュー

Astroメニューアプリは現在のプロジェクトの様々な情報やリンクに簡単なアクセスを提供します。また、AstroメニューアプリはAstroのドキュメントやAstroのGithubのレポジトリー、そしてAstroのDiscordサーバーへのアクセスも提供します。
このアプリには、クリック時に[`astro info`](/ja/reference/cli-reference/#astro-info)コマンドを実行し、クリップボードに結果をコピーする「デバッグ情報をコピーする」ボタンもあります。この機能は問題を報告する場合などに役に立ちます。

### Inspect（検査）

Inspectアプリはページ上の[アイランド](/ja/concepts/islands/)に関する情報を提供します。これらは各アイランドに渡されたプロパティやレンダーに使用されているクライアントディレクティブを表示することができます。

### Audit（監査）
監査アプリは一般的なアクセシビリティやパフォーマンスの問題を確認し自動的に監査を実行します。問題が発見された場合は、ツールバーに赤い点が現れます。アプリをクリックすることで、監査の結果のリストを表示し、関連するページ上の要素をハイライトします。

:::note
基本的なパーフォーマンスやアクセシビリティの監査機能は人間や[Pa11y](https://pa11y.org/)、そして[Lighthouse](https://developers.google.com/web/tools/lighthouse)の代替手段ではありません。

開発ツールバーは、異なるツールに切り替える必要なく、開発中の一般的な問題を迅速に発見する事を目的としています。
:::

### 設定
設定アプリは、ツールバーの位置や詳細ログの表示、通知の無効化などのデベロッパーツールバーの設定を変更します。

## 開発ツールバーを拡張する

Astroインテグレーションは、開発ツールバーにプロジェクトに特化した新しいアプリを追加することができます。[Astroメニュー](#astro-メニュー)を使用するか、[インテグレーションディレクトリ](https://astro.build/integrations/?search=&categories%5B%5D=toolbar)から追加することができます。

開発ツールバーのアプリは他の[Astro インテグレーション](/ja/guides/integrations-guide/)と同様に、そのインストール手順に従ってインストールしてください。

<RecipeLinks slugs={["ja/recipes/making-toolbar-apps"]} />

## 開発ツールバーを無効化する

開発ツールバーは標準で全てのサイトで有効になっています。必要であればプロジェクト・ユーザーごとに無効化することもできます。

### プロジェクトごとの無効化

開発ツールバーをプロジェクトで作業している全員のために無効化するには、[Astro 設定ファイル](/ja/reference/configuration-reference/#devtoolbarenabled)に`devToolbar: false`を追加してください。

```js title="astro.config.mjs" ins={4-6}
import { defineConfig } from "astro/config";

export default defineConfig({
  devToolbar: {
    enabled: false
  }
})
```

開発ツールバーをもう一度有効化する場合は、これらの行を削除するか、 `enabled:true`に設定を変更してください。

### ユーザーごとの無効化

開発ツールバーを特定のプロジェクトで自分のみ無効化したい場合、[`astro preferences`](/ja/reference/cli-reference/#astro-preferences)コマンドを実行してください。


```shell
astro preferences disable devToolbar
```

開発ツールバーを全てのプロジェクトで自分のみ無効化したい場合、`astro-preferences`コマンドに`--global`フラグを追加してください。

```shell
astro preferences disable --global devToolbar
```

開発ツールバーは以下のコマンドで再び有効化できます。

```shell
astro preferences enable devToolbar
```
